<template>
    <div class="carmiddle">
        <h2>商品清单</h2>
        <div class="commodity" v-for="table in tableData" :key="table.id">
            <div class="item">
                <div class="left"><img :src="table.cover" alt=""></div>
                <div class="right">
                    <div class="title">{{table.title}}</div>
                    <div class="physiognomy">{{table.physiognomy}}</div>
                    <div class="price">{{table.price}}</div>
                    <div class="acount">x {{table.acount}}件</div>
                    <div class="totalPrice">{{table.price*table.acount}}</div>
                </div>
            </div>
        </div>
        <div class="total">
            <div class="totalAll">共计<span>{{totalNum}}</span>件商品，应付总金额<span>{{totalMoney}}</span></div>
            <div class="remind">
                <p>重要提示：基于本网所售商品的特殊性及古旧书行业的具体情况，非十品（非全新）商品为有瑕疵商品，</p>
                <p>按照国家有关规定，不支持7天无理由退货。请认真考虑，确定同意再提交订单。</p>
            </div>
            <div class="submitBtn" @click="submitBtn">确认并提交订单</div>
        </div>
    </div>
    <carBottom />
</template>
<script lang="ts">
import carBottom from '@/components/personal/carBottom.vue';
import { defineComponent } from 'vue'
import { getCommodityList } from "@/utils/api";


// import { useStore } from "@/stores/cars";
export default defineComponent({
    data() {
        return {
            tableData: [{
                id: 1,
                cover: '',
                title: '',
                acount: 1,
                price: 40,
                physiognomy: '',
                selected: 1
            }
            ],
            totalNum: 0,
            totalMoney: 0,
        }
    },
    components: { carBottom },
    methods:{
        submitBtn(){
            this.$router.push({
                path: '/payment',
                query: {totalMoney:this.totalMoney}
            })
        }
    },
    created() {
        getCommodityList().then((res) => {
            console.log(res);
            this.tableData = res.data
            this.totalNum = this.tableData.reduce((pv, cv) => pv + cv.acount, 0)
            this.totalMoney = this.tableData.reduce((pv, cv) => pv + cv.acount * cv.price, 0)
        }).catch(err => {
            console.log(err);

        })

    }
})
</script>

<style lang="scss" scoped>
.carmiddle {
    font-size: 12px;
    color: #333;
    width: 1000px;
    margin: auto;
    margin-top: 60px;
    h2 {
        margin-bottom: 20px;
        border-bottom: 1px solid #aaa;
    }
    .total {
        .totalAll {
            text-align: right;
            border-top: 2px solid #8c222c;
            margin-top: 30px;
            padding-top: 26px;
            font-size: 14px;

            >span {
                color: #8c222c;
            }
        }
        .remind {
            color: #a9987f;
            margin-top: 30px;
            font-size: 12px;
            text-align: right;

        }
        .submitBtn {
            margin-top: 30px;
            margin-left: 828px;
            width: 160px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            color: #fff;
            font-size: 14px;
            border: 1px solid #8c222c;
            background-color: #8c222c;
        }
    }
    .commodity {
        display: flex;
        margin-right: 5px;
        margin-bottom: 10px;
        height: 80px;
        border-bottom: 1px dashed #e5e5e5;
        .item {
            display: flex;
            justify-content: space-between;

            .right {
                margin-left: 20px;
                width: 900px;
                display: flex;
                justify-content: space-between;
            }
        }

        .left>img {
            height: 60px;
            width: 60px;
        }
        .totalPrice {
            color: #bf7f5f;
        }
        .title {
            width: 300px;
        }
    }
}
</style>